<template>
	<view class="" style="margin: 20rpx;">
		<view style="position: sticky;left: 0;right: 0;top: 0; height: 120rpx;">
			<uni-search-bar @confirm="search" placeholder="请输入档位名称" :focus="false" v-model="searchValue" @blur="blur"
				@input="input" @cancel="cancel" @clear="clear">
			</uni-search-bar>
		</view>
		<uni-fab ref="fab" :pattern="pattern" :content="content" horizontal="right" vertical="bottom"
					  @fabClick="addStoreBtnAction" />

		<scroll-view scroll-y="true" class="conent">
			<view style="display: flex; justify-content: space-between; align-items: center;" class="item"
				v-for="(item, index) in list">
				<view class="" style="font-weight: 700; font-size: 28rpx;">
					<view class="">
						档位名称:{{" " + item.name}}
					</view>
					<view class="">
						档位价格:{{" " + item.price}}
					</view>
				</view>
			
				<view class="" style="display: flex; flex-direction: column;">
					<button type="primary" size="mini" :data-index="index" @click="bianjiBtnAction">编辑</button>
					<button style="margin-top: 20rpx;" :data-index="index" @click="shaunchuBtnAction" type="warn" size="mini">删除</button>
			
				</view>
			</view>
		</scroll-view>
		<view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="提示" content="确定是否此档位"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" :title="status == 0 ? '添加档位':'编辑档位'" value="" @confirm="buttonAction">

				<view class="" style="width: 100%;">
					<view class="">
						<view class="title-left">
							档位名称
						</view>
						<view class="box-border">
							<input type="text" placeholder="请输入档位名称" v-model="data.name">
						</view>
					</view>

					<view class="">
						<view class="title-left">
							档位价格
						</view>
						<view class="box-border">
							<input type="digit" placeholder="请输入档位价格" v-model="data.price">
						</view>
					</view>
				</view>

			</uni-popup-dialog>

		</uni-popup>
	</view>




</template>

<script>
	import api from '../../utils/interface.js'

	export default {
		data() {
			return {
				data: {
				
				},
				list: [],
				status:0,
				query: '',
				item:{}
				
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			async dialogConfirm(){
				const item = this.item
				
				if(item.use_type == true){
					return uni.showToast({
						icon: "none",
						title: '档位被使用,不可删除哟'
					})
				}
				const config = {
					url: api.baseUrl + api.deleteDangwei,
					method: 'post',
					data: {id : item.id}
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				console.log(code, data);
				if (code == 1) {
					uni.showToast({
						icon: "none",
						title: '删除成功'
					})
					this.getData()
				
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			shaunchuBtnAction(e){
				
				const index = e.currentTarget.dataset.index
				this.item = this.list[index];
				this.$refs.alertDialog.open()
			},
			bianjiBtnAction(e){
				this.status = 1;
				const index = e.currentTarget.dataset.index
				console.log(index);
				
				const value = this.list[index]
				this.data = Object.assign({}, value);
				this.$refs.inputDialog.open()
				
			},
			addStoreBtnAction() {
				this.data =  {}
				this.status = 0;
				this.$refs.inputDialog.open()
			},
			async getData() {
				console.log();
				const config = {
					url: api.baseUrl + api.getDangweiList,
					method: 'post',
					data: {
						query: this.query
					}
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				console.log(code, data);
				if (code == 1) {
					this.list = data
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			async commitEditAciton(){
				const config = {
					url: api.baseUrl + api.updateDangwei,
					method: 'post',
					data: this.data
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				console.log(code, data);
				if (code == 1) {
					uni.showToast({
						icon: "none",
						title: '修改成功'
					})
					this.getData()
				
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			async commitAddAciton(){
				const config = {
					url: api.baseUrl + api.addDangwei,
					method: 'post',
					data: this.data
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				console.log(code, data);
				if (code == 1) {
					uni.showToast({
						icon: "none",
						title: '添加成功'
					})
					this.getData()
				
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			search(res) {
				this.query = res.value
				this.getData()
			},
			input(res) {
				this.query = res
			},
			clear(res) {
				this.query = ''
				this.getData()
			},
			blur(res) {
				this.query = res.value
				this.getData()
			},
			focus(e) {
			
			},
			cancel(res) {
				this.query = ''
				this.getData()
			},
			async buttonAction(e) {
				console.log(e);
				if(this.data.name == undefined){
					return uni.showToast({
						icon: "none",
						title: '请输入档位名称'
					})
				}
				if(this.data.price == undefined){
					return uni.showToast({
						icon: "none",
						title: '请输入档位价格'
					})
				}
				
				if(this.status == 0){
					this.commitAddAciton()
				}else{
					this.commitEditAciton()
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #e5e5e5;
	}
	.conent {
		height: calc(100vh - 150rpx);
	}
	.item {
		margin: 20rpx 0;
		padding: 20rpx;
		background-color: white;
		border-radius: 12rpx;
	}

	.content {
		margin: 20rpx;
		font-size: 28rpx;
	}

	.title-left {
		border-left: 8rpx solid #007aff;
		padding: 0 20rpx;
		margin: 20rpx;
		font-weight: 700;
	}

	.box-border {
		border: 2rpx solid #e5e5e5;
		padding: 10rpx;
	}
</style>